<template>
  <div class="chart-item medium">
    <div class="chart-header">
      <h3>物料品种分布</h3>
      <div class="chart-tabs">
        <el-radio-group v-model="chartType" size="small" @change="handleChartTypeChange">
          <el-radio-button label="bar">柱状图</el-radio-button>
          <el-radio-button label="pie">饼图</el-radio-button>
        </el-radio-group>
      </div>
    </div>
    <div class="chart-content">
      <div ref="materialCategoryChart" class="chart"></div>
    </div>
  </div>
</template>

<script>
import * as echarts from 'echarts'

export default {
  name: 'MaterialCategoryChart',
  data() {
    return {
      chartType: 'bar',
      chart: null,
      categoryData: [
        { name: '原材料', value: 3245, color: '#5470c6' },
        { name: '半成品', value: 2876, color: '#91cc75' },
        { name: '成品', value: 2156, color: '#fac858' },
        { name: '辅料', value: 1234, color: '#ee6666' },
        { name: '包装材料', value: 801, color: '#73c0de' }
      ]
    }
  },
  mounted() {
    // 延迟初始化，确保DOM完全渲染
    setTimeout(() => {
      this.initChart()
    }, 100)
  },
  beforeUnmount() {
    if (this.chart) {
      this.chart.dispose()
    }
  },
  methods: {
    initChart() {
      this.$nextTick(() => {
        const chartDom = this.$refs.materialCategoryChart
        if (!chartDom) return

        this.chart = echarts.init(chartDom)
        this.updateChart()

        // 监听窗口大小变化
        window.addEventListener('resize', () => {
          if (this.chart) {
            this.chart.resize()
          }
        })
      })
    },

    updateChart() {
      if (!this.chart) return
      let option = {}

      if (this.chartType === 'bar') {
        option = {
          tooltip: {
            trigger: 'axis',
            axisPointer: {
              type: 'shadow'
            }
          },
          grid: {
            left: '3%',
            right: '4%',
            bottom: '8%',
            top: '10%',
            containLabel: true
          },
          xAxis: {
            type: 'category',
            data: this.categoryData.map(item => item.name),
            axisLabel: {
              rotate: 0,
              interval: 0,
              fontSize: 11,
              color: '#666'
            }
          },
          yAxis: {
            type: 'value',
            name: '数量',
            nameTextStyle: {
              color: '#666',
              fontSize: 12
            },
            axisLabel: {
              color: '#666',
              fontSize: 11
            }
          },
          series: [
            {
              name: '物料数量',
              type: 'bar',
              data: this.categoryData.map(item => ({
                value: item.value,
                itemStyle: {
                  color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                    { offset: 0, color: item.color },
                    { offset: 1, color: item.color + '80' }
                  ]),
                  borderRadius: [4, 4, 0, 0]
                }
              })),
              barWidth: '60%',
              label: {
                show: true,
                position: 'top',
                color: '#666',
                fontSize: 11
              }
            }
          ]
        }
      } else {
        option = {
          tooltip: {
            trigger: 'item',
            formatter: '{a} <br/>{b}: {c} ({d}%)'
          },
          legend: {
            orient: 'vertical',
            right: '10%',
            top: 'center',
            itemGap: 15,
            textStyle: {
              fontSize: 12
            }
          },
          series: [
            {
              name: '物料品种',
              type: 'pie',
              radius: ['40%', '70%'],
              center: ['40%', '50%'],
              data: this.categoryData.map(item => ({
                value: item.value,
                name: item.name,
                itemStyle: { color: item.color }
              })),
              emphasis: {
                itemStyle: {
                  shadowBlur: 10,
                  shadowOffsetX: 0,
                  shadowColor: 'rgba(0, 0, 0, 0.5)'
                }
              },
              label: {
                show: true,
                formatter: '{b}\n{c}'
              }
            }
          ]
        }
      }

      this.chart.setOption(option, true)
    },

    handleChartTypeChange(type) {
      this.chartType = type
      this.updateChart()
      this.$emit('chart-type-change', type)
    }
  }
}
</script>

<style lang="scss" scoped>
/* 组件特有样式 */
.chart-tabs {
  ::v-deep .el-radio-button__inner {
    padding: 6px 12px;
    font-size: 12px;
  }
}

.chart-content {
  .chart {
    width: 100%;
    height: 300px;
  }
}
</style>
